<script setup lang="ts">
import { getImage } from '@/api/api'
import { ref, onBeforeMount } from 'vue'

// 从后端获得数据
const imageList = ref<string[]>([])
onBeforeMount(async () => {
  const res = await getImage()
  imageList.value = res.data
})

// 触摸板滑动
import { computed } from 'vue'

const currentSlide = ref(0) // 记录当前轮播的索引
const startX = ref(0)
const endX = ref(0)
const isDragging = ref(false) // 跟踪拖拽状态

const slideLeft = computed(() => {
  // 计算当前平移量
  return `translateX(${currentSlide.value * -454}px)`
})

// 下一张
const slideNext = () => {
  if (currentSlide.value < 5) {
    currentSlide.value++
  }
}

// 上一张
const slidePrev = () => {
  if (currentSlide.value > 0) {
    currentSlide.value--
  }
}

// 触摸事件处理
const touchStart = (e: TouchEvent) => {
  startX.value = e.touches[0].clientX
}

const touchEnd = (e: TouchEvent) => {
  endX.value = e.changedTouches[0].clientX
  handleSwipe()
}

//鼠标事件处理
const mouseDown = (e: MouseEvent) => {
  // 只响应左键点击 (button === 0 表示左键)
  if (e.button !== 0) return

  isDragging.value = true
  startX.value = e.clientX
  document.addEventListener('mousemove', mouseMove)
  document.addEventListener('mouseup', mouseUp)
  e.preventDefault() // 防止文本选择等默认行为
}

const mouseMove = (e: MouseEvent) => {
  if (!isDragging.value) return
  endX.value = e.clientX
  handleSwipe()
  e.preventDefault()
}

const mouseUp = (e: MouseEvent) => {
  if (!isDragging.value) return
  isDragging.value = false
  document.removeEventListener('mousemove', mouseMove)
  document.removeEventListener('mouseup', mouseUp)
  e.preventDefault()
}

const handleSwipe = () => {
  if (Math.abs(endX.value - startX.value) < 20) return
  if (endX.value > startX.value) {
    slidePrev()
  } else {
    slideNext()
  }
}

// 滚轮事件处理
const toMousewheel = (e: WheelEvent) => {
  throttledChangeTouch(e)
}

const changeTouch = (e: WheelEvent) => {
  console.log(e)
  if (e.deltaX < 0) {
    slidePrev()
  } else if (e.deltaX > 0) {
    slideNext()
  }
}

// 节流函数
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
const throttle = (func: Function, delay: number) => {
  let timer: number | null = null
  return function (this: unknown, ...args: unknown[]) {
    if (!timer) {
      func.apply(this, args)
      timer = window.setTimeout(() => {
        timer = null
      }, delay)
    }
  }
}

const throttledChangeTouch = throttle(changeTouch, 1000)
</script>

<template>
  <div class="recommendFath">
    <h2>他们都在推荐 iSlide</h2>
    <div>
      <p>软件只是工具，而工具应该用来提升效率，创造价值。无论是 P 圈达人还是职场小白都能够借助 iSlide 做出改变，创造有效沟通的价值。</p>
    </div>
  </div>
  <div class="imgFath">
    <div class="imgUrl" :style="{ transform: slideLeft }" @touchstart="touchStart" @touchend="touchEnd"
      @mousewheel="toMousewheel" @mousedown="mouseDown">
      <img v-for="(imgUrl, index) in imageList" :key="index" :src="imgUrl">
    </div>
  </div>
</template>

<style scoped lang="less">
.recommendFath {
  width: 100%;
  min-width: 1300px;
  background-color: #fff;
  overflow: hidden;

  h2 {
    font-size: 60px;
    display: block;
    width: 1300px;
    margin: 0 auto;
    margin-top: 100px;
  }

  div {
    width: 1300px;
    margin: 0 auto;

    p {
      font-size: 18px;
      width: 680px;
      margin-bottom: 100px;
    }
  }

}

.imgFath {
  width: 100%;
  min-width: 1300px;
  overflow: hidden;
  margin-bottom: 50px;

  .imgUrl {
    display: flex;
    flex-wrap: nowrap;
    width: 1300px;
    margin: 0 auto;
    transition: transform 0.5s linear;
  }

  img {
    display: block;
    width: 414px;
    margin: 0 25px 25px 0;
    border-radius: 28px;
    box-shadow: 0 60px 80px -20px rgba(12, 19, 42, .08);
    border: 2px solid #fff;
    margin-bottom: 100px;
    transition: transform 0.5s linear;

    &:hover {
      transform: translateY(-8px);
    }
  }
}
</style>
